<template>
	<view>
		<!-- 评论页面 -->
		<textarea maxlength="100" v-model="areatext" auto-height placeholder="限100字"></textarea>
		<button type="primary" @click="addComment">添加评论</button>
		<view class="contentbox" v-if="commentlist.length == 0">暂无评论</view>
		<scroll-view scroll-y="" class="contentbox" v-else>
			<view v-for="(item, index) in commentlist">
				<hr v-if="index!=0">
				<view style="display: flex; padding: 1vh;">
					<image :src="item.imgurl == null ? '../../static/logo.png' : item.imgurl" mode="heightFix" style="width: 8vh; height: 8vh; border-radius: 50%; flex: 1;">
					<view style="flex: 6;">
						<view style="font-weight: bold; display: flex; justify-content: space-between;">
							<view>{{item.name}}</view>
							<view @click="reportComment(item.id)" style="color: red;">举报评论</view>
						</view>
						<view style="margin-top: 1vw;">{{item.comment}}</view>
					</view>
				</view>
			</view>
		</scroll-view> 
	</view>
</template>

<script>
	import { getcommentlist, addcomment, setcomment } from '../../apis/questionAPI.js'
	export default {
		data() {
			return {
				commentlist: [],
				areatext: "",
				questionId: 0
			}
		},
		onLoad(option) {
			let that = this
			this.questionId = option.questionId
			getcommentlist({
				questionId: option.questionId
			}).then(res => {
				// console.log(res.commentlist)
				that.commentlist = res.commentlist
			})
		},
		methods: {
			// 添加评论
			addComment() {
				if (this.areatext.split(' ').join('') == '') {
					uni.showToast({
						title: '输入内容不能为空',
						duration: 1000,
						icon: "none"
					})
					return
				}
				let item = {
					questionId: this.questionId,
					username: uni.getStorageSync('token'),
					comment: this.areatext
				}
				let that = this
				addcomment(item).then(r => {
					getcommentlist({
						questionId: that.questionId
					}).then(res => {
						// console.log(res.commentlist)
						that.commentlist = res.commentlist
						that.areatext = ''
					})
				})
			},
			// 举报评论
			reportComment(id) {
				uni.showModal({
					title: '提示',
					content: '是否举报该评论？',
					success: function (res) {
						if (res.confirm) {
							setcomment({
								id,
								isreport: 1
							}).then(res => {
								uni.showToast({
									title: '已举报该评论',
									duration: 2000
								});
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	textarea {
		margin: 1vh auto;
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 2vw;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
	}
	button {
		width: 94vw;
		margin: 1vh auto;
	}
	.contentbox {
		box-sizing: border-box;
		width: 94vw;
		max-height: 75vh;
		background-color: #f8f8f8;
		margin: 0vh auto;
		margin-top: 2vh;
		padding: 1vw;
		
		image {
			margin-right: 2vh;
		}
	}
</style>
